<!DOCTYPE html>
<html lang="cmn">
<head>
	<meta charset="UTF-8">
	<title>轮播图6</title>
	<style type="text/css">
		body,ul,ol{
			margin: 0;
			padding: 0;
		}
		li{
			list-style-type: none;
		}
		#box{
			width: 600px;
			height: 450px;
			position: relative;
			left: 400px;
			top: 20px;
			overflow: hidden;
		}
		img{
			border: none;
			vertical-align: top;
		}
		ul{
			width: 600px;
			height: 450px;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: 1;
		}
		ol{
			position: absolute;
			right: 20px;
			bottom: 20px;
			z-index: 2;
		}
		ol>li{
			float: left;
			color: white;
			width: 20px;
			height: 20px;
			border: 1px solid #fff;
			margin-right: 10px;
		}
		ol .olShow{
			color: #fff;
			background-color: #f60;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="pic/11.jpg" /></li>
			<li><img src="pic/22.jpg" /></li>
			<li><img src="pic/33.jpg" /></li>
			<li><img src="pic/44.jpg" /></li>
			<li><img src="pic/55.jpg" /></li>
			<li><img src="pic/66.jpg" /></li>
		</ul>
		
		<ol>
			<li class='olShow'>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ol>
	</div>



	
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var oUL=document.getElementsByTagName('ul')[0];
			var ulLi=oUL.getElementsByTagName('li');					//ul中的li 的集合
			
			var oOL=document.getElementsByTagName('ol')[0];
			var olLi=oOL.getElementsByTagName('li');					//ol中的li 的集合
			
			var oBox=document.getElementById('box');					//获取div框
			
			var oneHeight=ulLi[0].offsetHeight;			//一个图片的高度，等会儿用于top的位移
			
			for(var i=0;i<olLi.length;i++){
				olLi[i].index=i;
				olLi[i].onmouseover=function(){
					for(var i=0;i<olLi.length;i++){
						olLi[i].className=' ';
					}
					this.className='olShow';
					$(oUL).animate({
						top:(-oneHeight*this.index)+'px'				//一个图片的高度乘上数字，看位移为多少,jquery动画实现
					},200);
					iNow=this.index;
					iNow2=this.index;
				};
			};
			
			var iNow=0;													//自动切换累加器
			var iNow2=0;												//为了无缝轮播设置的变量，无缝要比iNow次数多一次（多第一张图）
			var timer=null;												//装定时器输出值，为了后续清除定时器用
			 timer=setInterval(autoRun,2000);							//两秒运行一次切换函数，定时器
			
			function autoRun(){  
				if(iNow==0){
					ulLi[0].style.position='static';
					oUL.style.top=0+'px';
					iNow2=0;
				}
			
				if(iNow==olLi.length-1){							//判断是否到最大值，是否还应该继续累加
					iNow=0;
					ulLi[0].style.position='relative';
					ulLi[0].style.top=(oneHeight*ulLi.length)+'px';
				}else{
					iNow++
				}
				iNow2++;
				
				for(var i=0;i<olLi.length;i++){					//清空所有索引
						olLi[i].className=' ';
					}		
				olLi[iNow].className='olShow';				//自动轮播到的位置，索引变亮	
					
					$(oUL).animate({
						top:(-oneHeight*iNow2)+'px'				//一个图片的高度乘上数字，看位移为多少
					},200);
					
			}
			
			oBox.onmouseover=function(){					//移入div内，删除定时器
				clearInterval(timer);
			};
			oBox.onmouseout=function(){
				 timer=setInterval(autoRun,2000);			//移出div内，开启定时器
			};
			
			
			
		}
		
	</script>

</body>
</html>